<template>
	<div class="flex_col">
		<div class="card flex_col m5 flex_center_self" style="margin-top: 50px; padding: 30px;">
			<label class="flex_center_self">登陆</label>
			<div class="flex_row_center mt5">
				<label>账号</label>
				<el-input class="ml5" style="width: 300px;" clearable v-model="req.account" />
			</div>
			<div class="flex_row_center mt5">
				<label>密码</label>
				<el-input class="ml5" style="width: 300px;" type="password" clearable v-model="req.pwd" />
			</div>
			<div class="flex_row_center" style="justify-content: center; margin-top: 30px;">
				<el-button @click="onClickLogin" type="primary">登陆</el-button>
			</div>
		</div>
	</div>


</template>

<script lang="ts" setup>
import router from '@/router';
import { login } from '@/service/http';
import { type LoginReq } from '@/service/model';
import { runAction } from '@/utils/ui';
import { reactive } from 'vue';


const req = reactive<LoginReq>({
	account: '',
	pwd: ''
});

async function onClickLogin() {
	runAction('登陆', '登陆', async () => {
		const user = await login(req);
		console.log(user);
	  await	router.replace('/');
	}); 
}

</script>
